<template>
  <div class="goodsDetails">
    <van-tabs
      v-model="active"
      swipeable
      animated
      background="#f2f2f2"
      title-active-color="red"
      @change="tabsChange" >
      <van-tab title="商品">
        <div class="goods_box">
          <!-- 轮播 -->
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item, index) in slideList" :key="index">
              <img style="width:100%;max-height:250px" :src="item" alt="图片" />
            </van-swipe-item>
          </van-swipe>
          <div class="goodsDetails_info">
            <h4>{{ goodsData.cp_mingcheng }}</h4>
            <p style="color:#ff4500">￥{{ goodsData.jiage }}</p>
            <p style="font-size:14px">{{ goodsData.cp_jianjie }}</p>
          </div>
          <!-- 会员 -->
          <div class="goodsInfo">
            <div>
              会员
              <van-tag style="font-size:14px" type="warning">银牌会员</van-tag>
            </div>
            <div style="text-align:right">享受价格 ￥123</div>
          </div>
          <!-- 库存 -->
          <div class="goodsInfo fs14_c69">
            <div>
              <p class="mb10">库存：{{ goodsData.cp_kucun }}件</p>
              <p>已销：{{ goodsData.cp_yixiaoshou }}件</p>
            </div>
            <div>
              <p class="mb10">限购：{{ goodsData.xiangou_shuliang }}</p>
              <p>评论：100条</p>
            </div>
          </div>
          <!-- 物流 -->
          <div class="goodsInfo">
            <div style="width:100%">
              <p class="mb10">
                <span class="fs14_c69">送至</span> 浙江 杭州 余杭区
              </p>
              <p><span class="fs14_c69">运费</span> 免运费</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情">
        <div id="details_box" class="details_box">
          <div v-html="details"></div>
          <van-empty v-if="details === ''" description="暂时没有详情" />
        </div>
      </van-tab>
      <van-tab title="评论">
        <div class="comments_box">
          <div
            class="comments_item"
            v-for="(item, index) in goodsComments"
            :key="index"
          >
            <div class="comments_item_title">
              <img :src="item.touxiang" alt="头像" />
              <span>{{ item.riqi }}</span>
            </div>
            <!-- 星星 -->
            <van-rate
              v-model="item.xing"
              :size="14"
              color="#ee0a24"
              void-icon="star"
              void-color="#eee"
              readonly
            />
            <p>{{ item.neirong }}</p>
          </div>
          <van-empty
            v-if="goodsComments.length === 0"
            description="暂时没有评论"
          />
        </div>
      </van-tab>
    </van-tabs>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="首页" @click="toIndex" />
      <van-goods-action-icon :icon="isCollect?'star':'star-o'" text="收藏" color="#ff5000" @click="collectFun" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="toShoppingCart"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addshoppingCart('add')" />
      <van-goods-action-button type="danger" text="立即购买" @click="addshoppingCart('buy')" />
    </van-goods-action>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "goodsDetails",
  data() {
    return {
      active: 0,
      goodsID: "", //商品id
      slideList: [], //轮播
      goodsData: {}, //商品信息
      details: "", // 商品详情
      goodsComments: [], //商品评论
      isCollect:false, //收藏
    };
  },
  mounted() {
    this.loadingFun("加载中...");
    this.goodsID = this.$route.query.id;
    this.getGoods();
    this.getGoodsDetails();
    this.getGoodsComments();
  },
  methods: {
    // tab切换
    tabsChange(name) {
      if (name !== 1) return;
      // 获取更新后的 DOM中的img
      this.$nextTick(() => {
        let imgs = document
          .getElementById("details_box")
          .getElementsByTagName("img");
        if (imgs.length === 0) return;
        for (let item of imgs) {
          item.style.width = "100%";
        }
      });
    },
    // 获取商品
    getGoods() {
      SERVE.getGoods({
        params: {
          cp_id: this.goodsID,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.goodsData = res.data;
          let {cp_tupian,cp_tupian1,cp_tupian2,cp_tupian3,cp_tupian4} = this.goodsData;
          this.slideList = [cp_tupian,cp_tupian1,cp_tupian2,cp_tupian3,cp_tupian4];
        })
        .catch((err) => {
          
          this.$toast.clear();
          console.log("err", err);
        });
    },
    // 获取商品详情
    getGoodsDetails() {
      SERVE.getGoodsDetails({
        params: {
          cp_id: this.goodsID,
        },
      })
        .then((res) => {
          this.details = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取商品评论
    getGoodsComments() {
      SERVE.getGoodsComments({
        params: {
          cpid: this.goodsID,
        },
      })
        .then((res) => {
          this.goodsComments = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 去首页
    toIndex() {
      this.$router.push("/index");
    },
    // 去购物车
    toShoppingCart(){
      this.$router.push("/shoppingCart");
    },
    // 收藏
    collectFun(){
      if (this.isCollect) {
        return this.$toast('已收藏');
      }
      this.loadingFun("收藏中...");
      SERVE.collectGoods({
        params:{
          cs_uid:window.localStorage.u_id,
          cs_cpid:this.goodsID
        }
      }).then((res) => {
          this.$toast.clear();
        if (res.data.zt === "yes") {
          this.isCollect = true;
          this.$notify({type:"success", message: "收藏成功" });
        }else{
          if(res.data.xinxi === "已经收藏"){
            this.isCollect = true;
            return this.$toast('已收藏');
          }
          this.$notify({ message: res.data.xinxi });
        }
      }).catch((err) => {
          this.$toast.clear();
        console.log('err',err);
      });
    },
    // 加入购物车
    addshoppingCart(opt_type){
      this.loadingFun("操作中...");
      SERVE.addShoppingCart({
        params:{
          cs_uid:window.localStorage.u_id,
          cs_cpid:this.goodsID,
          cs_cp_mingcheng:this.goodsData.cp_mingcheng,
          cs_jiage:this.goodsData.jiage,
        }
      }).then((res) => {
          this.$toast.clear();
          if (res.data.zt === "yes") {
        // 返回成功之后 根据opt_type 显示不同的状态
            if (opt_type === "add") {
              return this.$notify({type:"success", message: "加入购物车成功" });
            }
            this.$router.push("/shoppingCart");
          }else{
            if(res.data.xinxi === "已经在购物车"){
              if (opt_type === "add") {
                return this.$toast('该商品已在购物车中');
              }
              this.$router.push("/shoppingCart");
            }else{
              this.$notify({ message: res.data.xinxi });
            }
          }
      }).catch((err) => {
          this.$toast.clear();
        console.log('err',err);
      });
    },
    // loading
    loadingFun(info){
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: info,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.goodsDetails {
  .goods_box {
    height: calc(100vh - 94px);
    overflow-y: scroll;
    background-color: #f2f2f2;
    .goodsDetails_info {
      margin-top: -4px;
      display: inline-block;
      background-color: #fff;
      padding: 10px 15px 10px;
      box-sizing: border-box;
      width: 100%;
      word-break: break-all;
      & > h4 {
        margin: 0;
      }
      & > p {
        margin-top: 4px;
      }
    }
    .goodsInfo {
      margin-top: 6px;
      background-color: #fff;
      padding: 10px 15px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > div {
        width: 50%;
        height: 100%;
      }
      .mb10 {
        margin-bottom: 10px;
      }
    }
    .fs14_c69 {
      font-size: 14px;
      color: #696969;
    }
  }
  .details_box {
    height: calc(100vh - 94px);
    overflow-y: scroll;
    background-color: #f2f2f2;
    display: inline-block;
    padding: 10px 15px 10px;
    box-sizing: border-box;
    width: 100%;
    word-break: break-all;
  }
  .comments_box {
    height: calc(100vh - 94px);
    overflow-y: scroll;
    background-color: #f2f2f2;
    width: 100%;
    .comments_item {
      background-color: #fff;
      padding: 10px 15px 10px;
      box-sizing: border-box;
      word-break: break-all;
      margin-bottom: 6px;
      .comments_item_title {
        height: 30px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        img {
          border-radius: 50%;
          width: 22px;
          height: 22px;
        }
      }
    }
  }
}
</style>
